<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query">
      <el-row class="query">
          <el-form-item label="查询日期：">
            <el-date-picker
                v-model="query.month"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
        <el-form-item label="查询人：" prop="employeeName" >
          <el-input
              placeholder="请输入"
               v-model = query.employeeName
          ></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="danger" @click="clearFun" v-no-more-click
          >清空</el-button
          >
          <el-button type="primary" @click="queryFun" v-no-more-click
          >搜索</el-button
          >
        </el-form-item>
        <el-col :span="24">
          <el-form-item>
            <el-button
                icon="el-icon-circle-plus-outline"
                size="small"
                type="primary"
                v-no-more-click
                @click="orderExport"
            >导出</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
    >
      <el-table-column
          label="权证人员"
          align="center"
          prop = "employeeName"
          :show-overflow-tooltip="true"
      />
      <el-table-column
          label="统计月份"
          align="center"
          prop="month"
          :show-overflow-tooltip="true"
      />
      <el-table-column
          label="本月已放款笔数"
          align="center"
          prop="loanedNum"
          :show-overflow-tooltip="true"
      />
      <el-table-column
          label="放款总金额(万元)"
          align="center"
          prop="loanedMoney"
          :show-overflow-tooltip="true"
      />
      <el-table-column
          label="待放款"
          align="center"
          prop="pending"
          :show-overflow-tooltip="true"
      />

    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
          background
          layout="total,prev, pager, next, sizes"
          :total="total"
          :page-size="query.pageSize"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {getWarrantStatistics} from "@/assets/js/api";
import {expotOutBody} from "@/assets/js/utlis";

export default {
  name: "UnderDoorStatistics",
  data(){
    return{
      query: {
        employeeName:null,
        month:'',
        pageSize: 10,
        pageNum: 1,
      },
      total:1,
      currentPage:1,
      tableData:[],
      performanceDTO:{}
    }
  },
  created() {
    this.getList();
  },


  methods:{
    getList(){
      getWarrantStatistics(this.query).then((res)=>{
        if(res.code==200){
          if(res.data == null) {
            this.$message.error("没有数据");
          }else{
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.currentPage = res.data.current;
          }

        }
      })
    },



    // 搜索按钮
    queryFun() {
      this.query.pageNum = 1;
      this.getList();
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNum = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    //   清空按钮
    clearFun() {
      this.$refs["query"].resetFields();
      this.query.month = '';
      this.query.employeeName = ''
      this.query.pageNum = 1;
      this.getList();
    },
    //导出
    orderExport() {
      this.performanceDTO.employeeName = this.query.employeeName;
      this.performanceDTO.month = this.query.month;
      expotOutBody(
          "POST",
          "/business/performance/exportWarrant",
          this.performanceDTO,
          "权证绩效", // 导出文件名字


      );
    },
  },
}



</script>

<style scoped>
::v-deep .el-table td
{
  padding: 10px 0;
}
::v-deep .el-table th
{
  padding: 10px 0;
}
.query ::v-deep .el-input__inner
{
  height: 32px;
}
.query ::v-deep .el-input__icon
{
  line-height: 32px;
}
.query ::v-deep .el-form-item
{
  width: 320px;
}
.query ::v-deep .vue-treeselect__control
{
  line-height: 30px;  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder
{
  line-height: 30px;
}
::v-deep .btn .el-button
{
  line-height: 0;  width: 80px;  height: 32px;
}
::v-deep .el-table th > .cell
{
  font-size: 14px;  font-weight: bold;  color: #333;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td
{
  background: rgba(59, 157, 248, .1);
}
.box
{
  position: relative;  padding: 20px 20px 50px 20px;  background: #fff;
}
::v-deep .el-pagination
{
  position: absolute;  right: 0;  margin-top: 20px;
}
::v-deep .el-pagination__total
{
  visibility: hidden;
}
.title
{
  font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}
</style>